<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>优惠买单</title>
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				font-size: 0.16rem;
				background: #f0f0f0;
			}
			
			.paybox {
				background: #f0f0f0;
				box-sizing: border-box;
				padding: 0.1rem;
			}
			
			.paya {
				background: white;
				box-sizing: border-box;
				padding: 0.1rem;
				border-radius: 4px;
			}
			
			.paya_inner {
				height: 0.45rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666;
			}
			
			.paya_inner_left {
				font-size: 0.14rem;
			}
			
			.paya_inner_right {
				font-size: 0.13rem;
			}
			
			.payb {
				width: 100%;
				height: 0.45rem;
				background: linear-gradient(to right, #52c1fd, #218ff9);
				border-radius: 30px;
				color: white;
				text-align: center;
				line-height: 0.45rem;
				margin-top: 0.3rem;
			}
			
			.payb:hover {
				opacity: 0.8;
			}
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak class="paybox">
			<div class="paya">
				<div class="paya_inner">
					<div class="paya_inner_left">
						订单金额
					</div>
					<div class="paya_inner_right">
						{{total}}
					</div>
				</div>
				<div class="paya_inner">
					<div class="paya_inner_left">
						会员折扣
					</div>
					<div class="paya_inner_right">
						{{discount}}折
					</div>
				</div>
				<div class="paya_inner">
					<div class="paya_inner_left">
						优惠券
					</div>
					<div @click="tocoupon" class="paya_inner_right">
						{{coupon}}
					</div>
				</div>
				<div class="paya_inner">
					<div class="paya_inner_left">
						实付金额
					</div>
					<div class="paya_inner_right">
						{{pay}}
					</div>
				</div>
			</div>
			<div class="payb">确认买单</div>
		</div>
	</body>
	<script type="text/javascript" src="js/vue2.5.16.js" ></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				total: '50.00',
				discount: '9.0',
				coupon:'满50减10',
				pay:'35.00',
				items: ['1.本卡可享受9折优惠', '2.最终解释权归商家所有', '3.最终解释权归商家所有', '4.最终解释权归商家所有']
			},
			methods:{
				tocoupon:function(){
					window.location.href = 'coupon.html?index='+1
				}
			}
		})
	</script>

</html>